<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
%>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>相交线</title>
    <link rel="stylesheet" type="text/css" href="<%=path%>/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        body {
            /*background-color: #908733;*/
            background-image: url('<%=path%>/images/welcome4.jpg') ;
            /*width:1149px ;*/
            height:488px;
            overflow: hidden;
        }
        h1 {
            text-align: center;
            margin: 0 auto;
            margin-top:200px;
        }


        body {
            background-color: darkgrey;
            overflow: hidden;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
        }

        p {
            text-align: center;
            margin: 0 auto;
            margin-top: 150px;
            color: #fff;
            font-size: 32px;
            font-weight: bold;
            font-family: "微软雅黑";
        }

        p span {
            display: inline-block;
            position: relative;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
            -webkit-perspective: 500;
            perspective: 500;
            -webkit-font-smoothing: antialiased;
        }

        p span::before,
        p span::after {
            display: none;
            position: absolute;
            top: 0;
            left: -1px;
            -webkit-transform-origin: left top;
            -ms-transform-origin: left top;
            transform-origin: left top;
            -webkit-transition: all ease-out 0.3s;
            transition: all ease-out 0.3s;
            content: attr(data-text);
        }

        p span::before {
            z-index: 1;
            color: rgba(0, 0, 0, 0.2);
            -webkit-transform: scale(1.1, 1) skew(0deg, 20deg);
            -ms-transform: scale(1.1, 1) skew(0deg, 20deg);
            transform: scale(1.1, 1) skew(0deg, 20deg);
        }

        p span::after {
            z-index: 2;
            color: #eacb2ef2;
            text-shadow: -1px 0 1px #684da3, 1px 0 1px rgba(0, 0, 0, 0.8);
            -webkit-transform: rotateY(-40deg);
            transform: rotateY(-40deg);
        }

        p span:hover::before {
            -webkit-transform: scale(1.1, 1) skew(0deg, 5deg);
            -ms-transform: scale(1.1, 1) skew(0deg, 5deg);
            transform: scale(1.1, 1) skew(0deg, 5deg);
        }

        p span:hover::after {
            -webkit-transform: rotateY(-10deg);
            transform: rotateY(-10deg);
        }

        p span + span {
            margin-left: 0.1em;
        }

        @media (min-width: 10em) {
            p {
                font-size: 1em;
            }

            p span::before,
            p span::after {
                display: block;
            }
        }

        @media (min-width: 15em) {
            p {
                font-size: 2em;
            }
        }

        @media (min-width: 20em) {
            p {
                font-size: 2.5em;
            }
        }

        @media (min-width: 30em) {
            p {
                font-size: 4em;
            }
        }


    </style>
</head>
<body>

<%--原welcome--%>
<h1 style="color: #e6dde5a8;font-family: 幼圆"> 欢迎进入 <span style="font-size: xxx-large;font-weight: bold ;color: white">光子金融</span> 后台管理中心</h1>

<!--咨询聊天-->
<!-- 按钮触发模态框 -->
<span id="btns" style="position:absolute; right:10px; bottom:10px;">
			<!-- 按钮触发模态框 -->
    <button class="btn btn-primary btn-lg" style="z-index: 999"  data-toggle="modal" data-target="#myModal">回复消息</button></span>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">实时聊天</h4>
            </div>
            <div class="modal-body">


                <div id="message">

                </div>

                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="panel panel-primary">
                                <div class="panel-heading"> 咨询信息
                                    <div class="panelfooter" style="float: right">在线人数
                                        <span id="onlineCount">1</span>人
                                    </div>
                                </div>
                                <div id="msg" class="panel-body" style="height: 200px;overflow: auto;"></div>
                                <div class="row" style="margin:15px 60px">
                                    <div class="col-lg-8">
                                        <input type="text" class="form-control" id="msgsend" />
                                    </div>
                                    <div class="col-lg-4">
                                        <button onclick="send()" id="sendmsg"  class="btn btn-primary " >发送</button>

                                    </div>

                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" onclick="closeWebSocket() ">断开连接</button>

                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

    <script>
        let username = "admin";
        // let  ue = UE.getEditor('editor');;
        // 请求url
        let websocket = new WebSocket("ws://localhost:8888/websocket/" + username);


        websocket.onerror = function() {
            setMessageInnerHTML("连接失败，请稍后重试！！");
        }

        websocket.onopen = function() {
            setMessageInnerHTML("连接成功");
        }
        // 监听服务器发送过来的所有消息
        websocket.onmessage = function(event) {
            //  alert('--'+event.data);
            setMessageInnerHTML(event.data);
        }
        websocket.onclose = function() {
            setMessageInnerHTML("断开连接");
        }

        window.onbeforeunload = function() {
            if (confirm('确定关闭窗口吗')) {
                websocket.close();
            }

        }

        function setMessageInnerHTML(innerHTML) {
            console.log(innerHTML.indexOf(username) + "--------------kk");
            if (innerHTML.indexOf(username)) {
                document.getElementById("msg").innerHTML +=
                    "<div style='height:auto;width:400px;margin-top:10px;'><div style='float:left;margin-top: 10px;'>" +
                    "<img src='<%=path%>/images/touxiang1.png' width=50px;height=50px; style='float:left;border-radius:15px'/>" +
                    "<div style='margin-left:10px;float:left;text-align:left; background-color:beige;border-radius:5px; width:200px;height:auto;margin-top:10px;'>" +
                    "<span style='float:left;font-size:16px'>" +
                    innerHTML + "</span></div></div><br/>";
            } else {
                document.getElementById("msg").innerHTML +=
                    "<div style='height:auto;width:auto;margin-top:10px;'>" +
                    "<div style='float:right;width:600px;margin-top: 10px;'>" +
                    "<img src='<%=path%>/images/touxiang.png' width=50px;height=50px; style='float:right;border-radius:15px'/>" +
                    "<div style='margin-right:10px;float:right;text-align: right;background-color:beige;border-radius:5px; border:1px solid black;width:200px;height:auto;margin-top:10px;'><span style='font-size:16px;'> " +
                    innerHTML +
                    "</span></div></div><br/>";
            }
        }

        function closeWebSocket() {
            websocket.close();
        }

        function send() {
            let message = document.getElementById("msgsend").value;
            websocket.send(message);
            document.getElementById("msgsend").value = " "; //设置清空文本框的值
        }
    </script>
    <script type="text/javascript">
        window.onkeydown = function() {
            var EventUtil = {};
            EventUtil.getEvent = function() {
                if (window.event) {
                    return window.event;
                } else {
                    return EventUtil.getEvent.caller.arguments[0];
                }
            }
            //绑定你的id为submit的按钮事件
            var button = document.getElementById("sendmsg");
            if (EventUtil.getEvent().keyCode == 13) {
                button.click();
                //取消事件的默认操作
                event.returnValue = false;
            }
        }
    </script>


<%--<P> <span data-text="欢"> 欢</span>--%>
<%--    <span data-text="迎">迎</span> <span data-text="进">进</span> <span data-text="入">入</span> <span data-text="光">光</span>--%>
<%--    <span data-text="子">子</span><span data-text="金">金</span><span data-text="融">融</span>--%>
<%--    <span data-text="后">后</span><span data-text="台">台</span><span data-text="管">管</span><span data-text="理">理</span><span data-text="中">中</span>--%>
<%--    <span data-text="心">心</span>--%>
<%--</P>--%>
</body>
</html>
